<template>
  <div>
    <div>vant</div>
    <div>
      <van-button type="primary" icon="like" size="large">按钮</van-button>
      <van-button type="success" icon="circle" size="small">按钮</van-button>
      <van-button type="danger" icon="phone-o" size="mini">按钮</van-button>
      <van-button type="warning" icon="icon" url="http://www.baidu.com">跳转百度</van-button>
      <van-button type="warning" icon="icon" to="resource">路由跳转</van-button>
      <van-button @click="loading = !loading">按钮</van-button>
      <van-button :loading="loading">按钮</van-button>
    </div>
    <div>
      <van-button type="primary" plain="true">按钮</van-button>
      <van-button type="success" hairline="true">按钮</van-button>
      <van-button type="danger" disable="false">按钮</van-button>
      <van-button type="warning" round="true">按钮</van-button>
      <van-button square="true">按钮</van-button>
      <van-button block="true">按钮</van-button>
    </div>
    <div>
      swiper
      <van-swipe
        :autoplay="3000"
        style="height: 200px; width: 300px"
        lazy-render="true"
        vertical
        show-indicators="true"
      >
        <van-swipe-item v-for="(item, index) in images" :key="index">
          <img :src="item" alt="" style="width: 100%; height: 100%; object-fit: cover" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-tabs>
        <van-tab title="标签1">标签1内容</van-tab>
        <van-tab title="标签2">标签2内容</van-tab>
        <van-tab title="标签3">标签3内容</van-tab>
      </van-tabs>
    </div>
    <div>
      <!-- nav-bar -->
      <van-nav-bar title="标题" left-text="返回" right-text="更多" />
    </div>
    <div>
      <!-- form -->
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="user.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '用户名不能为空' }]"
          />
          <van-field
            v-model="user.password"
            name="password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '密码不能为空' }]"
          />
          <van-field
            v-model="user.code"
            name="code"
            label="验证码"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '验证码不能为空' }]"
          >
            <template #button>
              <van-button size="small" type="primary">获取验证码</van-button>
            </template>
          </van-field>
          <van-field
            v-model="user.textarea"
            name="textarea"
            type="textarea"
            label="备注"
            placeholder="请输入备注信息"
            autosize
          />
        </van-cell-group>
        <div>
          <van-button round block type="primary" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
    <div>
      <div style="height: 100px; overflow: hidden; position: relative; border: 1px solid #eee">
        <van-marquee direction="up" style="height: 100px" hover-stop>
          <div style="padding: 0 16px; line-height: 100px; color: #1989fa">这是第一条滚动消息</div>
          <div style="padding: 0 16px; line-height: 100px; color: #1989fa">这是第二条滚动消息</div>
          <div style="padding: 0 16px; line-height: 100px; color: #1989fa">这是第三条滚动消息</div>
        </van-marquee>
      </div>
    </div>
    <div>
      <div style="padding: 10px; background: #f2f3f5">
        <van-rate allow-half />
      </div>
    </div>
    <div>
      <div style="padding: 10px; background: #f2f3f5">
        <van-slider v-model="user.age" />
      </div>
    </div>
    <div>
      <div style="padding: 10px; background: #f2f3f5">
        <van-stepper v-model="user.age" integer />
      </div>
    </div>
    <div>
      <div style="padding: 10px; background: #f2f3f5">
        <van-checkbox-group>
          <van-checkbox name="A">复选框 A</van-checkbox>
          <van-checkbox name="B">复选框 B</van-checkbox>
          <van-checkbox name="C">复选框 C</van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <div>
      <div style="padding: 10px; background: #f2f3f5">
        <van-radio-group>
          <van-radio name="A">单选框 A</van-radio>
          <van-radio name="B">单选框 B</van-radio>
          <van-radio name="C">单选框 C</van-radio>
        </van-radio-group>
      </div>
    </div>
    <div>
      <div style="padding: 10px; background: #f2f3f5">
        <van-switch v-model="user.isGoodMan" />
      </div>
    </div>
    <div>
      <div style="padding: 10px; background: #f2f3f5">
        <van-pull-refresh>
          <div style="height: 100px; text-align: center; line-height: 100px">下拉刷新内容</div>
        </van-pull-refresh>
      </div>
    </div>
    <div>
      <div style="padding: 10px; background: #f2f3f5">
        <van-collapse>
          <van-collapse-item title="标题1" name="1"> 内容1 </van-collapse-item>
          <van-collapse-item title="标题2" name="2"> 内容2 </van-collapse-item>
          <van-collapse-item title="标题3" name="3"> 内容3 </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    <div>
      <!-- gird -->
      <div style="padding: 10px; background: #f2f3f5">
        <van-grid>
          <van-grid-item icon="home-o" text="首页" dot="true" />
          <van-grid-item icon="search" text="搜索" />
          <van-grid-item icon="friends-o" text="好友" badge="99+" />
          <van-grid-item icon="setting-o" text="设置" to="resource" />
        </van-grid>
        <van-grid column-num="3" border="false">
          <van-grid-item icon="like-o" text="喜欢" />
          <van-grid-item icon="chat-o" text="聊天" />
          <van-grid-item icon="user-o" text="用户" />
          <van-grid-item icon="cart-o" text="购物车" />
          <van-grid-item icon="fire-o" text="热门" />
          <van-grid-item icon="location-o" text="地址" />
        </van-grid>
        <van-grid column-num="3" center>
          <van-grid-item>
            <van-image
              src="https://img.yzcdn.cn/vant/apple-1.jpg"
              width="150px"
              height="150px"
              style="border-radius: 50%"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://img.yzcdn.cn/vant/apple-1.jpg"
              width="150px"
              height="150px"
              style="border-radius: 50%"
            />
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="https://img.yzcdn.cn/vant/apple-1.jpg"
              width="150px"
              height="150px"
              style="border-radius: 50%"
            />
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div>
      <!-- list -->
      <div style="padding: 10px; background: #f2f3f5">
        <van-list :finished="true" finished-text="没有更多了">
          <van-cell v-for="i in 10" :key="i" title="标题" value="内容" />
        </van-list>
      </div>
    </div>
    <div>
      <!-- card -->
      <div style="padding: 10px; background: #f2f3f5">
        <van-card
          title="标题"
          desc="描述信息"
          price="￥300"
          num="2"
          thumb="https://img.yzcdn.cn/vant/apple-1.jpg"
        >
          <template #tags>
            <van-tag type="danger">标签1</van-tag>
            <van-tag type="success">标签2</van-tag>
          </template>
          <template #footer>
            <div style="display: flex; justify-content: space-between; align-items: center">
              <span style="color: #ee0a24; font-size: 16px">￥300</span>
              <van-button size="small" type="primary">按钮</van-button>
            </div>
          </template>
        </van-card>
      </div>
    </div>
    <div>
      <!-- van-tabbar -->
      <div
        style="padding: 10px; background: #f2f3f5; position: fixed; bottom: 0; width: 100%; left: 0"
      >
        <van-tabbar placeholder="true">
          <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
          <van-tabbar-item icon="search" to="/resource">搜索</van-tabbar-item>
          <van-tabbar-item icon="friends-o" to="/router">好友</van-tabbar-item>
          <van-tabbar-item icon="setting-o" to="/element-plus">设置</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
const loading = ref(false)
const images = [
  'https://img.yzcdn.cn/vant/apple-1.jpg',
  'https://img.yzcdn.cn/vant/apple-2.jpg',
  'https://img.yzcdn.cn/vant/apple-3.jpg',
]
const user = reactive({
  username: 'zhangsan',
  password: '123456',
  age: 18,
  code: '',
  textarea: '',
  isGoodMan: true,
})
const onSubmit = (e: Event) => {
  e.preventDefault()
  console.log('submit', user)
}
</script>

<style scoped></style>
